<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> 设备树的优化</TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <style>
	body {
	background-color: white;
	margin:0; padding:0;
	text-align: center;
	}
	div, p, table, th, td {
		list-style:none;
		margin:0; padding:0;
		color:#333; font-size:12px;
		font-family:dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
	}
	#testIframe {margin-left: 10px;}
  </style>
<script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.core.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
  <SCRIPT type="text/javascript" >
  <!--
	var zTree;
	var demoIframe;

	var setting = {
		view: {
			dblClickExpand: false,      //双击节点时是否展示下级(boolean/function) function 有两个参数(treeId,treeNode)
			showLine: true,             //是否展示连接线
			selectedMulti: false        //是否允许多选   不是展示checkBoc
		},
		data: {
			simpleData: {
				enable:true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: ""
			}
		},
		callback: {
			beforeClick: function(treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("tree");
				//添加对后台的调用进行数据的查询展示
                loadMock(treeNode.id,treeNode.id);
                //JQuery方式
                $.ajax({
                    url: 'http://g.cn',
                    dataType: 'json',
                    success : function (data) {
                        console.log(data);
                    }
                });
				if (treeNode.isParent) {
					zTree.expandNode(treeNode);
					return false;
				} else {
					//demoIframe.attr("src",treeNode.file + ".html");
					return true;
				}
			}
		}
	};

	var zNodes =[
		{id:'100', pId:'2c905dc45d5ea6a9015da17d81650853', name:"上海电力", open:true},
		{id:'151', pId:'100', name:"上海市电力公司", file:"func/chart"},
		{id:'159', pId:'100', name:"松江供电公司", file:"func/filebeat"},
		{id:'152', pId:'100', name:"市区供电公司", file:"ztree/demo/cn/core/standardData"},
		{id:'154', pId:'100', name:"市南供电公司", file:"core/noicon"},
		{id:'10001', pId:'151', name:"交流3kV大馈线", file:"core/custom_icon"},
		{id:'10002', pId:'151', name:"交流6kV大馈线", file:"core/custom_iconSkin"},
		{id:'10003', pId:'151', name:"交流10kV大馈线", file:"core/custom_font"},
		{id:'10004', pId:'151', name:"交流15.75kV大馈线", file:"core/url"},
		{id:'10005', pId:'151', name:"交流20kV大馈线", file:"core/async"}
	];

	$(document).ready(function(){
        var t = $("#tree");
        t = $.fn.zTree.init(t, setting, zNodes);
        var zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.selectNode(zTree.getNodeByParam("id", 101));

        var t2 = $("#rightTree");
        t2 = $.fn.zTree.init(t2, setting, zNodes);
        var zTree2 = $.fn.zTree.getZTreeObj("rightTree");
        zTree2.selectNode(zTree2.getNodeByParam("id", 102));
	});

	function loadReady() {
//
	}

	function loadMock(oid,pid) {
        //准备数据
        Mock.mock('http://g.cn', {
            'name'     : '@name',
            'age|1-100': 100,
            'color'    : '@color',
            'id|+1' : oid + '0',
            'pid'    : pid
        });
    }

  //-->
  </SCRIPT>
 </HEAD>

<BODY>
<TABLE border=0  align=left>
	<TR>
		<TD width=400px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
			<ul id="tree" class="ztree" style="width:400px; overflow:auto;"></ul>
		</TD>
		<!--<TD width=770px align=left valign=top><IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100%  height=600px SRC="func/chart.html"></IFRAME></TD>-->
        <TD width=400px align=right valign=top style="BORDER-RIGHT: #999999 1px dashed">
            <ul id="rightTree" class="ztree" style="width:400px; overflow:auto;"></ul>
        </TD>
	</TR>
</TABLE>

</BODY>
</HTML>
